<template>
    <div id="risk-control-audit">
        <div>
            <h2 class="title">
                <div>
                    <img class="imgSize" src="@/assets/images/common/check.png" alt="" />
                    <span class="fontS16">
                        风控审核
                    </span>
                </div>
                <img class="imgSize linkSzie" src="@/assets/images/common/link.png" @click="linkimage" alt="" />
            </h2>
        </div>
        <div class="riskcontrolaudit-concent">
            <p class="txtSize">
                今日共计<span class="fontW">{{ totalInst }}</span
                >条风控审核条目，已审核通过<span class="fontW">{{ passedInst }}</span
                >条，已驳回<span class="fontW">{{ rejectInst }}</span
                >条。
            </p>
            <p class="txtSize">
                <img class="imgSize" src="@/assets/images/common/warning.png" alt="" />
                目前有<span class="fontW colorR">{{ unhandledInst }}</span
                >条风控审核条目待处理：
            </p>
            <div class="riskcontrolaudit-concent_table">
                <el-table :data="detail" border style="width: 100%" height="100%" v-loading="loading" stripe>
                    <!-- :header-cell-style="{ background: '#DC985B', color: '#000' }" -->
                    <el-table-column prop="productName" label="产品" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="orderDirection" label="委托方向" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="stockCode" label="证券代码" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="stockName" label="证券名称" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="entryNames" label="触警条目">
                        <template slot-scope="scope">
                            <el-tooltip placement="left-start" :disabled="!scope.row.entryNames">
                                <div slot="content" class="tooltip-content">
                                    <span v-for="item in processEntryNames(scope.row.entryNames)" :key="item">
                                        {{ item }}
                                        <br />
                                    </span>
                                </div>
                                <span>{{ scope.row.entryNames ? scope.row.entryNames.toString() : '--' }}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { getRiskApproval } from '@/pages/home/api';
import { getUser } from '@/utils/user-util';

@Component({ name: 'RiskContrilAudit' })
export default class RiskContrilAudit extends Vue {
    detail: any[] = [];
    totalInst: string = '--'; // 总指令
    unhandledInst: string = '--'; // 未处理指令
    rejectInst: string = '--'; // 拒绝指令
    passedInst: string = '--'; // 通过指令
    loading: boolean = false;
    TimeSendMessage = null;
    created() {
        this.getList('autoRefresh');
        this.TimeSendMessage = setInterval(async () => {
            this.getList('autoRefresh');
        }, 60 * 1000);
    }

    beforeDestroy() {
        if (this.TimeSendMessage) {
            this.TimeSendMessage && clearInterval(this.TimeSendMessage);
            this.TimeSendMessage = null;
        }
    }

    getList(operateType?: string) {
        this.loading = true;
        getRiskApproval(operateType)
            .then((res: any) => {
                this.loading = false;
                this.detail = res?.riskApprovals || [];
                this.totalInst = res.totalInst;
                this.unhandledInst = res.unhandledInst;
                this.rejectInst = res.rejectInst;
                this.passedInst = res.passedInst;
            })
            .catch(() => {
                this.loading = false;
            });
    }

    linkimage() {
        // verifyMenuAuthApi('/bypass/approval').then((res: any) => {
        //     if (res) {
        //         top.window.postMessage('/bypass/approval', '*');
        //     } else {
        //         this.yh_message_error('无风险审核页面权限,不可跳转');
        //     }
        // });
        let obj = getUser().resources.find(item => item.menuUrl == '/bypass/approval');
        console.log(obj, 'obj');
        if (obj) {
            top.window.postMessage('/bypass/approval', '*');
        } else {
            this.yh_message_error('无风险审核页面权限,不可跳转!');
        }
    }

    entryNames: any = '';

    // 触警条目
    processEntryNames(entryNames) {
        // { entryNames }
        let val = entryNames;
        if (val) {
            // let value = [...new Set(val)];
            // this.entryNames = value.join('\xa0\xa0');
            // // let entryNames = '';
            // // [...new Set(val)].forEach(item => {
            // //     entryNames += item + '\xa0\xa0\xa0\xa0';
            // // });
            // // return entryNames;
            let values = [];
            let actualV = [];
            entryNames.forEach(element => {
                if (!values.includes(element.split(':')[0])) {
                    values.push(element.split(':')[0]);
                    actualV.push(element);
                }
            });
            return actualV;
        } else {
            return [];
        }
    }
}
</script>
<style lang="scss" scoped>
.riskcontrolaudit-concent {
    border: 2px solid #888;
    border-radius: 5px;
    box-shadow: 6px 0 6px 0px #b2a9a0, 0 5px 19px 0 #b2a9a0;
    .riskcontrolaudit-concent_table {
        margin: 0px 5px 8px 5px;
        height: calc(50vh - 116px);
        min-height: 100px;
        overflow: auto;
    }
}
.title {
    // color: #dc985b;
    margin-left: 10px;
    margin-bottom: 5px;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
}
.imgSize {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: -4px;
}
.linkSzie {
    cursor: pointer;
}
.el-divider--horizontal {
    margin: 10px 0 10px 0 !important;
}
.txtSize {
    width: 98%;
    // color: #dc985b;
    margin-left: 10px;
    font-size: 16px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
<style lang="scss">
.el-tooltip__popper {
    max-width: 400px;
}
.el-table .cell {
    white-space: nowrap;
}
.tooltip-content {
    height: 60px;
    overflow: auto;
}
.fontW {
    font-weight: bolder;
    margin: 0 6px;
}
.colorR {
    color: red;
}
.fontS16 {
    font-size: 16px;
}
</style>
